import Taro from '@tarojs/taro';
import { View, Image } from '@tarojs/components'
import { AtActivityIndicator } from 'taro-ui'
import Iconfont from '@/components/Iconfont'
const tipsHomeStore = 'https://static3.jekunauto.com/img/others/tips-home_store.png'
const Navigation = 'https://static3.jekunauto.com/img/others/navigation.png'
import './index.scss'

// 附近好店
export default ({ goods = { contentList: {} }, store }) => {
  const { contentList = { content: [] } } = goods
  const loading = store

  const style = {
    backgroundImage: contentList['layoutBackground'] ? `url('${contentList['layoutBackground']}')` : undefined,
    marginBottom: goods['margin'] ? `${goods['margin']}px` : 0
  }

  return (
    <View className='store-box' style={{ ...style }}>
      {
        loading ?
          <View>
            <View className="head">
              <View className="head_name">
                <Image lazyLoad className='head_name_img' src={contentList['layoutIcon']} />
                {contentList['advancedSettingTitle']}
              </View>
              <View className="head_all" onClick={() => { Taro.switchTab({ url: '/pages/tabbar/store/index' }) }}>
                <View className="head_all_text">查看更多</View>
                <Iconfont size='24' color='#CCCCCC' name='icon-jiantourukou' />
              </View>
            </View>
            <View className="main">
              <View className="main_store">
                <Image className="main_store_img" mode='aspectFill' src={store.topUrl ? store.topUrl : tipsHomeStore} />
              </View>
              <View className="main_msg" onClick={() => { Taro.navigateTo({ url: `/pages/store/detail/index?list=${JSON.stringify(store)}` }) }}>
                <View className="main_msg_name">{store.storeName}</View>
                <View className="main_msg_address">{store.address}</View>
                <View className="main_msg_phone" onClick={(e) => {
                  // 拨打电话
                  e.stopPropagation()
                  Taro.makePhoneCall({ phoneNumber: store.phone })
                }
                }>
                  {store.phone}
                </View>
              </View>
              <View className="main_distance" onClick={() => {
                // 使用微信内置地图查看位置
                const { latitude, longitude, address, storeName } = store
                Taro.openLocation({
                  latitude: Number(latitude),
                  longitude: Number(longitude),
                  scale: 18,
                  name: storeName,
                  address
                })
              }}>
                <Image src={Navigation} className="main_distance_img" />
                <View className='main_distance_num'>{store.distance}</View>
              </View>
            </View>
          </View> :
          <AtActivityIndicator mode='center' />
      }
    </View >
  )
}
